<template>
  <jm-page class="p-12px">
    <jm-search-layout class="mb-10px" :gutter="16">
      <jm-search-box :span="8" label="人员名称">
        <el-input
          class="w-full"
          placeholder="请输入"
          v-model="searchState.name"
          clearable
        >
        </el-input>
      </jm-search-box>
      <jm-search-box :span="8" label="手机号码">
        <el-input
          class="w-full"
          placeholder="请输入"
          v-model="searchState.mobile"
          clearable
        >
        </el-input>
      </jm-search-box>
      <jm-search-box :span="8" class="text-right">
        <el-button @click="onReset" icon="delete" size="small" type="info"
          >重置</el-button
        >
        <el-button @click="onSearch" icon="Search" size="small" type="primary"
          >搜索</el-button
        >
        <AddRole></AddRole>
      </jm-search-box>
    </jm-search-layout>
    <div class="flex flex-1 h-90/100">
      <el-row class="h-full w-full" :gutter="20">
        <el-col :span="6" class="overflow-auto h-full">
          <el-tree
            ref="treeRef"
            :highlight-current="true"
            style="max-width: 300px; height: 100%"
            :data="treeListData"
            node-key="value"
            :default-expanded-keys="expandedKeys"
            @node-click="handleNodeClick"
          />
        </el-col>
        <el-col :span="18" class="!flex h-full">
          <jm-table
            row-key="userid"
            showCheckbox
            @change="handlerCheckbox"
            :isCustomWidth="false"
            :hasRefresh="false"
            max-height="74vh"
            ref="tableRef"
            :columns="USER_INDEX_COLUMNS"
            :apiParams="{}"
            url="/dataApi/user/getPersonList"
          ></jm-table
        ></el-col>
      </el-row>
    </div>
  </jm-page>
</template>
<script setup>
import AddRole from './components/addRole.vue'
import { USER_INDEX_COLUMNS } from './static'
import { useUserManager } from './share'
import { provide } from 'vue'
const modules = useUserManager()

const {
  treeRef,
  tableRef,
  onSearch,
  handleNodeClick,
  handlerCheckbox,
  treeListData,
  expandedKeys,
  searchState,
  onReset
} = modules.userManagerIndexStore
provide('modules', modules)
</script>
<style lang="scss" scoped></style>
